<template>
  <div class="info-content">
    <NavTitle title="代码库触发">
      <template #extra>
        <div class="trigger-rule-info">
          <a-switch
            v-model:checked="formData.isCodeTrigger"
            checked-children="开"
            :checkedValue="1"
            :unCheckedValue="0"
            un-checked-children="关"
            :disabled="isView"
          />
        </div>
      </template>
    </NavTitle>
    <div class="trigger-rule-content">
      <div class="trigger-rule-list">
        <div class="trigger-rule-item">
          <span class="trigger-rule-desc-left">push事件：</span>
          <span class="trigger-rule-desc-right"
            >代码提交触发、Tag创建触发、合并请求新建/更新触发、合并请求完成后触发、生成Webhook地址触发</span
          >
        </div>
        <div class="trigger-rule-item">
          <span class="trigger-rule-desc-left">webhook地址：</span>
          <span class="trigger-rule-desc-right">{{ formData.webhookUrl }}</span>
        </div>
      </div>
    </div>

    <NavTitle title="定时触发">
      <template #extra>
        <div class="trigger-rule-info">
          <a-switch
            v-model:checked="formData.isClockTrigger"
            :checkedValue="TimeTriggeredType.open"
            :unCheckedValue="TimeTriggeredType.close"
            checked-children="开"
            un-checked-children="关"
            :disabled="isView"
          />
        </div>
      </template>
    </NavTitle>

    <div class="trigger-rule-content">
      <div class="trigger-rule-list">
        <div class="trigger-rule-item">
          <span class="trigger-rule-desc-left color">触发方式：</span>
          <span class="trigger-rule-desc-right">
            <a-radio-group
              :disabled="isView"
              v-model:value="formData.triggerWay"
              :options="methodList"
              @change="triggerMethodChange"
            />
          </span>
        </div>
        <div class="trigger-rule-item">
          <span class="trigger-rule-desc-left color">触发时间：</span>
          <span class="trigger-rule-desc-right" v-if="formData.triggerWay == TriggType.singleTime">
            <a-date-picker
              :disabled="isView"
              :disabledDate="disabledDate"
              v-model:value="formData.triggerTime"
              format="YYYY-MM-DD HH:mm:ss"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              placeholder="请选择触发时间"
              :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }"
            />
          </span>
          <span class="trigger-rule-desc-right" v-if="formData.triggerWay == TriggType.cycle">
            <a-select
              :disabled="isView"
              v-model:value="formData.weekDay"
              :options="weekTimeList"
              style="width: 180px; margin-right: 8px"
              placeholder="请选择触发时间"
              allowClear
            >
              <template #suffixIcon>
                <CaretDownOutlined style="color: #6b84a5" />
              </template>
            </a-select>
            <a-time-picker
              :disabled="isView"
              v-model:value="formData.periodTriggerTime"
              placeholder="请选择触发时间"
              format="HH:mm:ss"
              valueFormat="HH:mm:ss"
              style="width: 180px"
            />
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { CaretDownOutlined } from '@ant-design/icons-vue';
import dayjs from 'dayjs';
import {} from '@/api/pipeline';
import { usePipelineStore } from '@/store/modules/pipeline';
import { storeToRefs } from 'pinia';
import { cloneDeep } from 'lodash';
import { PipelineOperationTypeCode, TriggType, TimeTriggeredType } from '@/enums/pipelineEnum';
const route = useRoute();
const counterStore = usePipelineStore();
const { triggerSetting } = storeToRefs(counterStore);
const { setTriggerSettingsData } = counterStore;
const dataObject = ref<any>(cloneDeep(triggerSetting));

const isView = computed(() => route.params.type == PipelineOperationTypeCode.info);
const getPipeLineData = computed(() => {
  return dataObject.value;
});

const methodList = ref([
  { label: '周期触发', value: TriggType.cycle },
  { label: '单次触发', value: TriggType.singleTime },
]);
const weekTimeList = [
  { label: '周一', value: 'MON' },
  { label: '周二', value: 'TUE' },
  { label: '周三', value: 'WED' },
  { label: '周四', value: 'THU' },
  { label: '周五', value: 'FRI' },
  { label: '周六', value: 'SAT' },
  { label: '周日', value: 'SUN' },
];

const disabledDate = (current: any) => {
  const currentDayjs = dayjs(current);
  const isBeforeToday = currentDayjs.isBefore(dayjs());
  return isBeforeToday;
};

const formData = reactive({
  isCodeTrigger: 0,
  isClockTrigger: 0,
  triggerWay: 1,
  webhookUrl: `${window.location.host}/devops/webhook/${route.params.code}`,
  triggerTime: undefined,
  weekDay: undefined,
  periodTriggerTime: '',
});

const triggerMethodChange = (e: any) => {};

watch(
  getPipeLineData,
  (newVal) => {
    if (Object.keys(newVal).length > 0) {
      dataObject.value = cloneDeep(newVal);
      formData.isCodeTrigger = dataObject.value.isCodeTrigger;
      formData.isClockTrigger = dataObject.value.isClockTrigger;
      formData.triggerWay = dataObject.value.triggerWay;
      formData.triggerTime = dataObject.value.triggerTime;
      formData.weekDay = dataObject.value.weekDay;
      formData.periodTriggerTime = dataObject.value.periodTriggerTime;
    }
  },
  {
    immediate: true,
  },
);

watch(formData, (newVal) => {
  if (newVal) {
    setTriggerSettingsData({ ...dataObject.value, ...newVal });
  }
});
</script>

<style scoped lang="less">
.info-content {
  width: 100%;

  .trigger-rule-info {
    position: absolute;
    left: 130px;
    top: 50%;
    transform: translate(0, -16px);
  }

  .trigger-rule-content {
    width: 100%;
    margin-bottom: 48px;
    .trigger-rule-list {
      display: flex;
      flex-direction: column;
      margin-left: 85px;
      margin-top: 20px;
      .trigger-rule-item {
        margin-bottom: 20px;
        .trigger-rule-desc-left {
          color: #b2b2b2;
          font-size: 14px;
          width: 120px;
          text-align: right;
          display: inline-block;
        }
        .trigger-rule-desc-right {
          color: #000;
          margin-left: 8px;
        }
        .color {
          color: #000 !important;
          &::before {
            content: '*';
            font-size: 14px;
            margin-right: 4px;
            color: #ff4d4f;
          }
        }
      }
    }
  }
}
</style>
